<template>
  <div id="information">
    <el-card class="box-card">
      <template v-slot:header>
<div  class="header">
        <span>{{ book.title }}</span>
      </div>
</template>
      <el-row class="content">
        <el-col :span="6"><img id="cover" :src="book.cover" /></el-col>
        <el-col :span="6">
          <div style="padding-top: 30px">
            <span v-for="spec in book.specifications" :key="spec.item" class="spec"
              >{{ spec.item }}：{{ spec.value }}</span
            >
            <span class="spec" style="display: inline-block">豆瓣评分：</span>
            <el-rate v-model="rate" disabled style="display: inline-block" />
            <span style="color: #ff9900; font-size: 14px">{{ book.rate }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <el-divider direction="vertical" class="devider"></el-divider>
          <Checkstand :purchase="purchase" :product="book"></Checkstand>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <template v-slot:header>
<div  class="header">
        <span>内容简介</span>
      </div>
</template>
      <div class="content description" v-html="book.description"></div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <template v-slot:header>
<div  class="header">
        <span>详情介绍</span>
      </div>
</template>
      <img v-if="book.detail" :src="book.detail" />
      <span v-else class="content">本书暂无详细介绍</span>
    </el-card>
  </div>
</template>

<script setup>
import api from '@/api'
import Checkstand from '@/components/home/detail/Checkstand.vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const rate = ref(0)

const purchase = ref({
        amount: 1,
        delivery: true,
        address: { province: '广东省', city: '广州市', area: '海珠区' },
      })
const book = ref({
        price: 0,
        specifications: {},
        rate: 0,
      })


onMounted(async () => {
    book.value = (await api.warehouse.getUniqueProductById(route.params.id)).data
    rate.value = book.value.rate / 2;
  })
</script>

<style scoped>
.bg {
  width: 100%;
  background-color: #fff;
}

#cover {
  width: 250px;
  height: 250px;
  float: left;
  padding: 20px;
  display: inline-block;
}

.spec {
  display: block;
  font-size: 14px;
  line-height: 25px;
  color: #666;
}

.devider {
  display: inline-block;
  height: 345px;
  vertical-align: top;
}

.description {
  font-size: 14px;
  line-height: 24px;
  text-indent: 2em;
}
</style>
